<template>
  <div style="position: relative">
    <div class="mask" v-if="handleType == 'look'"></div>
    <a-form
      ref="formRef"
      layout="vertical"
      :model="formState"
      :rules="rules"
      :wrapper-col="wrapperCol"
      style="display: flex; flex-wrap: wrap"
    >
      <a-form-item
        style="width: 50%; padding-right: 15px"
        ref="name"
        label="类型名称"
        name="name"
      >
        <a-input v-model:value="formState.name" placeholder="请输入类型名称" />
      </a-form-item>
      <a-form-item
        style="width: 50%; padding-left: 15px"
        ref="code"
        label="类型编号"
        name="code"
      >
        <a-input v-model:value="formState.code" placeholder="请输入类型编号" />
      </a-form-item>
      <a-form-item style="width: 100%" ref="remark" label="备注" name="remark">
        <a-textarea
          placeholder="请输入备注"
          v-model:value="formState.remark"
          showCount
          :maxlength="120"
        />
      </a-form-item>
    </a-form>
  </div>
</template>
<script>
import {
  defineComponent,
  onMounted,
  reactive,
  ref,
  toRaw,
  toRef,
  toRefs,
  watch,
} from "vue";
import { message } from "ant-design-vue";
import { getUserInfo } from "@/utils/auth";
import * as deviceClassifyApi from "@/api/deviceClassify.js";
const validateName = (rule, value, callback) => {
  if (!value) {
    callback(new Error("请输入类型名称"));
  } else if (
    value &&
    !/^[A-Za-z0-9]{1,50}$|^[\u4e00-\u9fa5A-Za-z0-9]{1,25}$/.test(value)
  ) {
    callback(new Error("类型名称不超过50个英文字符或25个汉字"));
  } else {
    callback();
  }
};
const validateCode = (rule, value, callback) => {
  {
    if (!value) {
      callback(new Error("请输入类型编号"));
    } else if (value.length > 22) {
      callback(new Error("类型编号长度小于22位"));
    } else {
      callback();
    }
  }
};
const rules = {
  //form表单非空校验
  name: [
    {
      required: true,
      validator: validateName,
      trigger: "blur",
    },
  ],
  code: [
    {
      required: true,
      validator: validateCode,
      trigger: "blur",
    },
  ],
};

export default defineComponent({
  props: {
    handleType: {
      type: String,
      default: "add",
    },
    handleRow: {
      type: Object,
      default: {},
    },
  },
  setup(props, { emit }) {
    const handleType = toRef(props, "handleType");
    const formRef = ref();
    const formState = reactive({
      id: "",
      name: "",
      remark: "",
      code: "",
    });
    const userInfo = ref(getUserInfo() ? JSON.parse(getUserInfo()) : {});

    // 保存数据
    const handleSave = () => {
      if (props.handleType == "look") {
        resetForm();
        emit("finish");
        return false;
      }
      formRef.value.validate().then(() => {
        let params = {
          ...toRaw(formState),
        };
        deviceClassifyApi.deviceClassifySave(params).then((res) => {
          if (res && res.success) {
            message.success("操作成功");
            resetForm();
            emit("finish");
          } else {
          }
        });
      });
    };
    const resetForm = () => {
      formRef.value.resetFields();
    };
    onMounted(async () => {
      if (props.handleType == "add") {
        formState.id = "";
        return false;
      }
      console.log(2323);
      formState.id = props.handleRow.id;
      formState.name = props.handleRow.name;
      formState.code = props.handleRow.code;
      formState.remark = props.handleRow.remark;
    });

    return {
      formRef,

      handleType,
      userInfo,
      wrapperCol: {
        span: 0,
      },
      formState,
      rules,
      handleSave,
      resetForm,
    };
  },
});
</script>
<style lang="scss">
.mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
}
</style>